<template>
	<view class="title">
		<view class="tit-box">
			<alltitleVue :title="title" :url="url" />
		</view>

		<view class="box" v-for="(item,index) in shop.goodsOrderDetails" :key="index" @click="clickRe(index)">
			<view class="box-title">
				<text>你对商品满意吗？</text>
				<!-- <view class="title-right">
					<view :class="['checkbox', { selected: selected }]" class="checkbox" @click="toggleItemSelection">
						<u-icon v-if="selected" color="#fff" size="30" name="checkmark"></u-icon>
					</view>
					<text>匿名评价</text>
				</view> -->
			</view>
			<view class="box-mid">
				<image :src="item.goods.photoUrl.split(',')[0]" mode=""></image>
				<view class="mid-ri">
					<view class="ri-top">
						{{item.goods.title}}
					</view>
					<view class="ri-bot">
						<u-rate :count="count" v-model="params[index].evaluate" @change="changeHie(index)"></u-rate>
						<text>{{Hierarchical[index].dictLabel}}</text>
					</view>
				</view>
			</view>
			<view class="box-bot">
				<textarea name="" placeholder="说说对商品的想法吧........" v-model="params[index].content" id="" cols="30"
					rows="10"></textarea>





				<u-upload :action="action" :header="uploadHeaders" :file-list="fileList"
					@on-success="handleUploadSuccess" @fail="handleUploadFail"></u-upload>
			</view>
		</view>
		<view class="" @click="sumbit">
			<allBtnVue :btnText="btnText" />
		</view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import {
		setgoodsOrderEvaluate,
		getregistration
	} from '../../service/api.js'
	import allBtnVue from '../../components/allBtn.vue';
	import {
		getStore
	} from "../../utils";
	export default {
		components: {
			allBtnVue
		},
		data() {
			return {
				title: "评价",
				// fileList: [],
				count: 5,
				params: [{
					//订单号
					orderNumber: "",
					//评分
					evaluate: 0,
					content: "",
				}],
				shop: {},
				index:0,
				value: 0,
				Hierarchical: [],
				selected: false,
				evaluate: "",
				token: "",
				btnText: "提交",
				// '/dev-api/resource/oss/upload'
				action: config.host + 'resource/oss/upload',
				hierarchicalMap: [],

			}
		},
		computed: {
			// 动态构建上传的 header
			uploadHeaders() {
				return {
					Authorization: `Bearer ${this.token}`, // 把 token 加到请求头中
					'Custom-Header': 'CustomValue', // 如果需要其他自定义头部，添加这里
					"clientid": "af80f6d0dc2d2f09587d2bd25e384d84"
				};
			}
		},
		onShow() {
			this.token = getStore('token')
		},
		onLoad(options) {
			this.getevaluate()
			if (options.orderDetails) {
				this.shop = JSON.parse(options.orderDetails);
				this.params = this.shop.goodsOrderDetails.map((item) => ({
					orderNumber: this.shop.orderNumber, // 可以填充对应的订单号
					evaluate: 5, // 默认评分为5
					content: "",
					goodsId: item.goodsId,
					photo: "",

				}));
				this.Hierarchical = this.shop.goodsOrderDetails.map(() => ({
					dictLabel: ""
				}));

			}
		},
		methods: {
			clickRe(index){
				this.index=index
			},
			//评分状态
			async getevaluate() {
				let res = await getregistration("evaluate_number");
				if (res.code == 200) {
					this.hierarchicalMap = res.rows;

				}
			},
			handleUploadSuccess(response, file, fileList) {
			    if (response && response.data && response.data.url) {
			        // 如果 `this.params[this.index].photo` 存在并且是一个字符串，则拼接新的 URL
			        if (this.params[this.index].photo) {
			            // 检查是否已经有 URL，如果有，则用逗号拼接
			            this.params[this.index].photo += ',' + response.data.url;
			        } else {
			            // 如果没有 URL，则直接赋值
			            this.params[this.index].photo = response.data.url;
			        }
			
			        console.log(this.params[this.index].photo);  // 输出拼接后的 URL 字符串
			       console.log(this.params,"1111111111111");
			    }
			},

			// 上传失败回调
			handleUploadFail(error, file, fileList) {
				console.log('上传失败:', error);
				console.log('文件信息:', file);
				console.log('文件列表:', fileList);

				// 可以在此处理错误情况，显示提示信息等
			},


			changeHie(index) {

				this.Hierarchical[index].dictLabel = this.hierarchicalMap[this.params[index].evaluate].dictLabel;

			},
			toggleItemSelection() {
				// 切换单个商品的选中状态
				this.selected = !this.selected;

			},
			async sumbit() {
				console.log(this.params, "这里传递的是什么");
				let res = await setgoodsOrderEvaluate(this.params);
				if (res.code == 200) {
					uni.navigateTo({
						url: `/integration/evaluateSuccess/index`
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding-top: 190rpx;
	}

	.tit-box {
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.box {
		margin: auto;
		width: 654rpx;
		padding: 24rpx;

		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.box-bot {
			margin-top: 24rpx;
			width: 606rpx;
			padding: 24rpx;
			background: #F5F3F0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.box-title {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 32rpx;

			text {
				font-weight: bold;
				font-size: 32rpx;
			}

			.title-right {
				display: flex;
				align-items: center;
				font-weight: 100;
				font-size: 24rpx;
				color: #808080;
			}

			.checkbox {
				width: 28rpx;
				height: 28rpx;
				border: 1rpx solid #ccc;
				border-radius: 50%;
				margin-right: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				cursor: pointer;
				background-color: white;
			}

			.checkbox.selected {
				border: 1rpx solid #CCA566;
				background-color: #CCA566;
			}

			.item-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 16rpx;
			}

			.item-details {
				flex: 1;
			}

			.item-actions {
				display: flex;
				align-items: center;
			}
		}

		.box-mid {
			display: flex;
			margin-top: 24rpx;

			image {
				width: 94rpx;
				height: 94rpx;
				border-radius: 7rpx 7rpx 7rpx 7rpx;
				margin-right: 16rpx;
			}

			.mid-ri {
				.ri-bot {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #808080;
					}
				}

				.ri-top {}
			}
		}

	}
</style>